<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理--订单列表--订单详情</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <!--固定table列-->
    <link href="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet"/>
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/orderManage/user/userOrderDetail.css">
</head>
<body>
<div class="outerSphereBox">
    <div class="outerSphere">
        <div class="titleNav">
            <h1>订单详情</h1>
        </div>
    </div>

    <div class="titContant">
        <!--产品订单表主键-->
        <input type="hidden" id="productOrderId" name="productOrderId" th:value="${productOrderId}"/>
        <input type="hidden" id="contractId" name="contractId" />
        <!--订单状态-->
        <input type="hidden" id="orderStatus" name="orderStatus" th:value="${orderDetailVO?.orderStatus}"/>
        <table>
            <tr>
                <td>编号：<span class="text" th:text="${orderDetailVO?.orderNumber?:''}"></span></td>
                <td>合同编号：
                    <a class="js-create-tab" data-title="合同详情" th:if="${not #strings.isEmpty(orderDetailVO.contractNumber)}" th:attr="data-url=@{'/front/contractManager/contractDetailAdmin?contractId='+ ${orderDetailVO.contractId}}">
                        <span class="text" th:text="${orderDetailVO?.contractNumber?:''}"></span>
                    </a>
                </td>
                <td>订单状态：
                    <span class="text" th:switch="${orderDetailVO?.orderStatus?:''}">
                        <span th:case="1">等待回款</span>
                        <span th:case="2">已完成</span>
                        <span th:case="3">作废</span>
                        <span th:case="4">部分回款</span>
                        <span th:case="5">预回款</span>
                    </span>
                </td>

            </tr>
            <tr>

                <td>客户名称：<span class="text" th:text="${orderDetailVO?.customerName?:''}"></span></td>
                <td>订单所有人：<span class="text" th:text="${orderDetailVO?.userName?:''}"></span></td>
                <td>所属分公司：<span class="text" th:text="${orderDetailVO?.companyName?:''}"></span></td>

            </tr>

            <tr>
                <td>创建日期：<span class="text" th:text="${#dates.format(orderDetailVO?.createTm, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>

    <br />
    <div class="subheading">
        <p>产品详情</p>
        <div style="background: #FFFFFF;margin: 20px 20px 10px 20px">
            <table id="productDetailTable"></table>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p class="pTag">活动产品</p>
        <div style="background: #FFFFFF;margin: 20px 20px 10px 20px">
            <table id="activityProductTable"></table>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>赠品详情</p>
        <div style="background: #FFFFFF;margin: 20px 20px 10px 20px">
            <table id="giftDetailTable"></table>
        </div>
    </div>
    <br />
    <div class="subheading">
        <p>优惠券</p>
        <div style="background: #FFFFFF;margin: 20px 20px 10px 20px">
            <table id="couponTable"></table>
        </div>
    </div>
    <br />

    <div class="subheading">
        <p>附加费用</p>
        <div class="charges-money" style="background: #FFFFFF;margin: 20px 20px 10px 20px">
            <div>金额：<span class="text" th:text="${orderDetailVO?.orderSurcharge?:''}"></span></div>
            <div>费用备注：<span class="text" th:text="${orderDetailVO?.orderSurchargeRemark?:''}"></span></div>
        </div>

    </div>
    <br />
    <div class="subheading">
        <p>订单金额</p>
        <div class="centerContant centerContantMoney">
            <div><span class="after-content blueColor">订单总金额</span><span class="text AmountData" th:text="${orderDetailVO?.orderTotalAmount?:''}"></span></div>
            <div><span class="after-content yellowColor">订单实际成交金额</span><span class="text AmountData" th:text="${orderDetailVO?.orderActualTotalAmount?:''}"></span></div>
        </div>
    </div>
    <br />

    <div class="subheading">
        <p>回款状况</p>
        <div style="background: #FFFFFF;margin: 20px 20px 0 20px">
            <table id="returnMoneyTable"></table>
        </div>
        <div class="titleTherr">
            <span>总计应回款：<span class="text" th:text="${orderDetailVO?.contractReceivables?:''}"></span></span>
            <span>目前回款：<span class="text" th:text="${orderDetailVO?.returnMoneyAmount?:''}"></span></span>
            <span>尾款：<span class="text" th:text="${orderDetailVO?.residueMoneyAmount?:''}"></span></span>


        </div>
    </div>
    <br />
    <div class="subheading">
        <p>退款记录</p>
        <div style="background: #FFFFFF;margin: 20px 20px 0 20px">
            <table id="refundTable"></table>
        </div>
<!--        <div class="titleTherr">-->
<!--            <span>申请退款金额：<span class="text" id="applyBackMoney"></span></span>-->
<!--            <span>审批人：<span class="text" th:text="${orderDetailVO?.returnMoneyAmount?:''}"></span></span>-->
<!--            <span>审批时间：<span class="text" th:text="${orderDetailVO?.residueMoneyAmount?:''}"></span></span>-->
<!--        </div>-->
    </div>
    <br />
    <div class="subheading">
        <p>会员产品</p>
        <table id="memberFinishOrderProductTable"></table>
    </div>
    <br />
    <div class="subheading">
        <p>非会员产品</p>
        <table id="nonMemberFinishOrderProductTable"></table>
    </div>
    <br/>
    <div class="subheading">
        <p>审批详情</p>

        <table class="centerContant centerContantStatus">
            <tr>
                <td>特批合同订单：
                    <span class="text" th:switch="${orderDetailVO?.specialApprovalStatus?:''}">
                        <span th:case="1">是</span>
                        <span th:case="0">否</span>
                    </span>
                </td>
                <td>当前审核状态：
                    <span class="text" th:switch="${orderDetailVO?.contractReviewStatus?:''}">
                        <span th:case="0">未审核</span>
                        <span th:case="1">审核中</span>
                        <span th:case="2">审核通过</span>
                        <span th:case="3">审核失败</span>
                        <span th:case="4">审核通过并盖章</span>
                    </span>
                </td>
                <td >审核备注：<span class="text" th:text="${orderDetailVO?.contractReviewNotes?:''}"></span></td>
            </tr>
            <tr>
                <td>审核人：<span class="text" th:text="${orderDetailVO?.reviewerName?:''}"></span></td>
                <td>审核日期：<span class="text" th:text="${#dates.format(orderDetailVO?.reviewTime, 'yyyy-MM-dd')}"></span></td>
            </tr>
        </table>

    </div>


</div>

<!-- 产品详细信息 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="productInfo">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">产品详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="well form-well">
                    <h3>会员卡信息</h3>
                    <div id="cardInfolist">
                        <!--                        <div class="card-info clearfix" id="cardInfo">-->
                        <!--                            <div class="code" id="cardCode"></div>-->
                        <!--                            <div class="pull-left">-->
                        <!--                                <h5>卡号：<span id="cardNum"></span></h5>-->
                        <!--                                <p>密码：<span id="cardPassword">*********</span></p>-->
                        <!--                                <p>有效期：<span id="cardDays">****.**.** 至 ****.**.**</span></p>-->
                        <!--                            </div>-->
                        <!--                            <div class="btn-box" id="carInfoBox">-->
                        <!--                                <p><span>暂无会员卡，请点击按钮申请会员卡</span></p>-->
                        <!--                                <button type="button" class="btn btn-primary" id="applyCard">申请会员卡</button>-->
                        <!--                            </div>-->
                        <!--                        </div>-->

                    </div>

                </div>
                <div class="well form-well">
                    <h3>税法直通车信息</h3>
                    <div id="taxLawCardInfoList">
                        <!--                        <div class="card-info clearfix" id="taxLawCardInfo" style="height: 100px">-->
                        <!--                            <div class="pull-left">-->
                        <!--                                <h5>卡号：<span id="taxLawCardNum"></span></h5>-->
                        <!--                                <p>密码：<span id="taxLawCardPassword">*********</span></p>-->
                        <!--                            </div>-->
                        <!--                            <div class="btn-box">-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>

                </div>
                <div class="well form-well">
                    <h3>兑换码信息</h3>
                    <div id="exchangeCardInfoBox">

                    </div>
                    <!--                    <div class="card-info clearfix" id="exchangeCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="exchangeCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="exchangeCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>云顾问卡信息</h3>
                    <div id="cloudAdvisorCardInfoBox">

                    </div>
                    <!--                    <div class="card-info clearfix" id="cloudAdvisorCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="cloudAdvisorCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="cloudAdvisorCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>充值卡信息</h3>
                    <div id="rechargeCardInfoBox"></div>
                    <!--                    <div class="card-info clearfix" id="rechargeCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>卡号：<span id="rechargeCardNum"></span></h5>-->
                    <!--                            <p>密码：<span id="rechargeCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well">
                    <h3>优惠券信息</h3>
                    <div id="couponsCardInfoBox"></div>
                    <!--                    <div class="card-info clearfix" id="couponsCardInfo"  style="height: 100px">-->
                    <!--                        <div class="pull-left">-->
                    <!--                            <h5>优惠卷码：<span id="couponsCardNum"></span></h5>-->
                    <!--                            <p>优惠券名称：<span id="couponsCardPassword">*********</span></p>-->
                    <!--                        </div>-->
                    <!--                        <div class="btn-box">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <div class="well form-well isShow">
                    <h3>线上课程</h3>
                    <table id="onlineCourse"></table>
                </div>
                <div class="well form-well isShow">
                    <h3>线下课程</h3>
                    <table id="offlineCourse"></table>
                </div>
                <div class="well form-well isShow">
                    <h3>增值服务</h3>
                    <table id="valueAddedServices"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="expensesRecord">
    <div class="modal-dialog modal-lg" role="document" style="width: 90%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <iframe src="" frameborder="0" id="expensesRecordIframe"></iframe>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/bootstrap.lyear.dropdowntree.min.js"></script>
<!-- 拖动 -->
<script src="/js/bootstrap-table/extensions/resizable/bootstrap-table-resizable.min.js"></script>
<script src="/js/crm/common/colResizable-1.6.min.js"></script>
<script src="/js/crm/common/common.js"></script>

<script type="text/javascript" src="/js/crm/orderManager/orderDetail.js"></script>
</html>